<template>
    <div>
        <div class="block">
            <el-cascader v-model="provSelectValue" :options="prov" placeholder="请选择省份" @change="getProvSence"></el-cascader>
            <el-cascader v-model="citySelectValue" :options="city" placeholder="请选择城市" @change="getCitySence"></el-cascader>
            <!-- <el-cascader v-model="provSelectValue" :options="prov" placeholder="请选择区" @change="handleChange"></el-cascader> -->
        </div>
        <el-row>
            <el-col v-for="(o, index) in attractions" :key="index" :span="4">
                <el-card :body-style="{ padding: '10px' }">
                    <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                        class="image" />
                    <div style="padding: 14px">
                        <div>{{ o.name }}</div>
                        <!-- <div>{{ o.introduction }}</div> -->
                        <div class="bottom">
                            <router-link :to="{ path: '/TextEdit', query: { id: o.id } }">查看</router-link>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4">
                <el-card :body-style="{ padding: '10px' }" class="insert-card">
                    <div class="avatar-uploader-icon" @click="addSence">
                        <Plus />
                    </div>

                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { scenicPage, getProvOrCity } from '../request/apiRequest'

const router = useRouter()
let prov = ref([])
const city = ref([])
let provSelectValue = ref([])
let citySelectValue = ref([])
let attractions = ref([])

onBeforeMount(() => {
    getAllProv()
    const provSelectValueSession = sessionStorage.getItem("provSelectValue");
    if (provSelectValueSession != null) {
        provSelectValue.value = JSON.parse(provSelectValueSession)
        getCiytByProv(provSelectValue.value[0])
    }
    const citySelectValueSession = sessionStorage.getItem("citySelectValue");
    if (citySelectValueSession != null) {
        citySelectValue.value = JSON.parse(citySelectValueSession)
    }
    getCitySence()
})
const addSence = () => {
    router.push({ name: "TextEdit" })
}
const getProvSence = () => {
    // 获取景点列表
    const params = {
        "current": 1,
        "size": 1000,
        "adCode": provSelectValue.value[0],
    }
    scenicPage(params).then((data) => {
        const records = data.data.records;
        attractions.value = records
    }).catch((response) => {
        console.log(response)
    });
    // 获取城市列表
    getCiytByProv(provSelectValue.value[0])
}

const getCitySence = () => {
    let params = {
        "current": 1,
        "size": 1000,
        "areaCode": citySelectValue.value[0]
    }
    sessionStorage.setItem("provSelectValue", JSON.stringify(provSelectValue.value));
    sessionStorage.setItem("citySelectValue", JSON.stringify(citySelectValue.value));
    scenicPage(params).then((data) => {
        attractions.value = data.data.records
        console.log(attractions.value)
    }).catch((response) => {
        console.log(response)
    });
}

const getAllProv = () => {
    const params = {
    }
    getProvOrCity(params).then((data) => {
        const result = data.data
        const province = []
        for (let i in result) {
            const newObj = {
                label: result[i].name,
                value: result[i].adCode
            }
            province.push(newObj)
        }
        prov.value = province
    }).catch((response) => {
        console.log(response)
    });
}

const getCiytByProv = (parentCode) => {
    const params = {
        parentCode
    }
    getProvOrCity(params).then((data) => {
        const result = data.data
        const cityTemp = []
        for (let i in result) {
            const newObj = {
                label: result[i].name,
                value: result[i].adCode
            }
            cityTemp.push(newObj)
        }
        console.log(cityTemp)
        city.value = cityTemp
        console.log(city)
    }).catch((response) => {
        console.log(response)
    });
}

</script>

<style>
.insert-card {
    width: 274px;
    height: 330px;
}

.avatar-uploader-icon {
    /* 相对于最近的已定位祖先进行定位 */
    margin-left: 50%;
    /* 左边界与视口宽度的一半重合 */
    margin-top: 72%;
    /* 上边界与视口高度的一半重合 */
    transform: translate(-50%, -50%);
    /* 向左、向上移动自身尺寸的一半 */
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>